<!DOCTYPE>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>创建消息</title>
    <link rel="stylesheet" href="${rc.contextPath}/static/lib/layui/css/layui.css"  media="all">
    <link rel="stylesheet" href="${rc.contextPath}/static/plugin/layer/skin/layer.css">
    <!--<link rel="stylesheet" href="list.css">-->
    <style type="text/css">
        body{padding-top:10px;}
        .fl{float:left;}
        .fr{float:right;}
        .por{position: relative;}
        .clearfix:after{content:'';display:block;height:0;visibility:hidden;clear:both;}
        .clearfix{zoom:1;}
        #pagination{margin:0 20px;}
        .layui-form{margin:0 20px;}
        .update input{position: absolute;height:36px;width:100px;z-index:3;opacity: .01;cursor: pointer;}
        .update span{color:#5FB878;position: absolute;left:0;top:0;width: 110px;height:36px;text-align:center;line-height:36px;border:1px solid #ddd;border-bottom-right-radius: 2px;border-top-right-radius:2px;font-size:14px;}
        .update i{color:#000;font-style: normal;font-size:16px;}
        .layui-form-item .layui-input-inline{width:auto;}
        /*通知对象样式*/
        .box{height:28px;border:1px solid red;font-size:0;margin:5px;}
        .content{margin:5px;}
        .content select{width:100px;}
        .content select option.disabledBg{background:#ddd;}
        /* 选中的元素span被放到展示框里的样式 */
        .box span{font-size:12px;display:inline-block;border:1px solid #ddd;margin:3px;padding:2px;cursor:pointer;border-radius:2px;}
        .box span:hover{box-shadow: 0 0 10px #666;}
        .box span b{display: inline-block;height:12px;width:12px;text-align:center;line-height:12px;padding:0 2px;vertical-align:top;}
        .box span b img{width: 12px;height:12px;vertical-align:middle;}
        .checkbox{position: relative;width:100px;height:32px;padding-left:32px;}
        .checkbox input{position: absolute;left:0;top:0;width:50px;height:32px;opacity:.01;z-index:2;cursor:pointer;}
        .checkbox input:hover+i{border:1px solid #5FB878;}
        .checkbox i.checkedColor{color:#fff;border:1px solid #5FB878;background: #5FB878;}
        /*table td ,table th{border:1px solid #bbb;padding:0 5px;font-size:14px;}*/
        .checkbox i.downTriangle{position: absolute;width:22px;height:22px;line-height:22px;text-align:center; text-indent: -8px;top:0;bottom:0;left:0;margin:auto;z-index:1;font-size:16px;color:#ddd;}
         #layui-layer1{top:50px !important;}
        /*上传按钮样式*/
        .layui-upload-button{min-width:110px;background-color:rgba(255,255,255,0);color:#5FB878;margin-left:14px;margin-right:5px;}
        .layui-upload-button:hover {background-color:rgba(255,255,255,0);color:#5FB878;}
        .layui-upload-button input:hover {background-color:rgba(255,255,255,0);color:#fff;cursor:pointer;}
        .layui-upload-icon{margin:0;font-size:14px;}
        .layui-upload-icon i{color:#5FB878;}
        /*通知对象*/
        .receive {padding:2px 5px;margin:0 10px 0 0;line-height: 48px;border:1px solid #ddd;width:157px;float:left;}
        .receive li{line-height:32px;box-sizing: border-box;width:150px;}
        .receive li input{width:150px;}
        /*.receive li.allChose input{width:32px;}*/
        /*用户显示面板*/
        .userPanel{position: fixed;border:1px solid #ddd;left:0;top:0;z-index: 3;width:100%;min-height:100%;background: rgba(0,0,0,.4);}
        .userPanel h3{heigth:32px;line-height: 32px;font-size: 16px;text-align: center;background: #eee;}
        .userPanel .userPanelContent{position: absolute; border:1px solid #ddd;left:50%;top:40px;width:50%;height:50%;transform: translateX(-50%);background: #fff;padding-bottom:50px;}
        .userPanel .userPanelContent .checkboxIcon{border:1px solid #ddd;width:32px;height:32px;line-height:32px;display: inline-block;}
        /*关闭按钮*/
        .userPanel .closeIcon{position: absolute;right:0;top:0;width:32px;height:32px;text-align: center;line-height: 32px;cursor:pointer;background: #eee;z-index:9999;}
        .userPanel button{position: relative;top:170px;right:-50px;text-align:center;}
        /*消息类型下拉框*/
        .msgType{padding: 2px 5px;
            margin: 0 10px 0 0;
            height:38px;
            line-height: 48px;
            border: 1px solid #ddd;
            width: 170px;
            float: left;
        }
        .x-red{
            color: red;
        }
    </style>
</head>
<body>
<div id="createApp">
<div>
<form >
    <input type="hidden" name="id" id="id" v-model="parameter.id">
    <input type="hidden" name="status" id="status" v-model="parameter.status">
    <input type="hidden" name="createTime" id="createTime" v-model="parameter.createTime">
    <input type="hidden" name="updateTime" id="updateTime" v-model="parameter.updateTime">
    <input type="hidden" name="readTime" id="readTime" v-model="parameter.readTime">
    <input type="hidden" name="imageShow" id="imageShow" v-model="parameter.imageShow">
    <input type="hidden" name="createUser" id="createUser" v-model="parameter.createUser">
    <input type="hidden" name="updateUser" id="updateUser" v-model="parameter.updateUser">

    <fieldset class="layui-elem-field layui-field-title" >
        <legend>消息</legend>
    </fieldset>
  <div class="layui-form-item">
    <label class="layui-form-label">发布人</label>
    <div class="layui-input-inline" >
      <input type="text" name="publish"   v-model="parameter.publish" autocomplete="off" class="layui-input" disabled="">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">消息标题</label>
    <div class="layui-input-inline">
      <input type="text" name="title" :value="parameter.title" v-model="parameter.title" lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
      <div class="layui-form-mid layui-word-aux layui-input-inline">
          <span class="x-red" style="font-size: 14px;">*必填</span>
      </div>
  </div>
  <div class="layui-form-item ">
    <label class="layui-form-label">消息内容</label>
    <div class="layui-input-block">
      <textarea  class="layui-textarea" placeholder="请输入内容"  name="content"   style="width: 600px;height: 200px; display:inline-block;float: left;margin-right:10px;" v-model="parameter.content">
      </textarea>
      <div class=" layui-form-mid layui-input-inline" style="margin-top:82px;float: left;font-size:12px;">
         <span class="x-red" style="font-size: 14px;">*必填</span>
      </div>
    </div>
  </div>
    <div class="layui-form-item">
        <label class="layui-form-label">消息附件</label>
        <div class="site-demo-upload por">
            <img id="LAY_demo_upload" :src='imgSrc' style="width: 200px; height: 200px; border-radius: 50%;">
            <input type="hidden" id="attachMent" name="sysFileEntity">
            <div class="site-demo-upbar" style="position: absolute; left: 142px; bottom: 20px;">
                <input type="file" name="file" lay-type="file" id="fileUpload" class="layui-upload-file">
            </div>
        </div>
    </div>

    <div class="layui-form-item clearfix" >
        <label class="layui-form-label">通知对象</label>
        <ul class="receive"  v-for="item in messagesLists" >
            <li class="por  checkbox">
                <span @click="downShow(item)"  style="cursor:pointer;"><i class="layui-icon downTriangle" :class="{'downRotate':item.subItemShowFlag}" style="float:right;font-size:20px;cursor:pointer;" >&#xe623;</i>{{item.deptName}}</span>

            </li>
            <li class="checkbox" v-for="subItem in item.departmentList"  v-if="item.subItemShowFlag">
                <span @click="userShow(subItem)" style="cursor:pointer;">
                    {{subItem.deptName}}
                    <i  class="layui-icon downTriangle" :class="{'downRotate':item.userShowFlag}" style="float:right;font-size:20px;cursor:pointer;" >&#xe623;</i>
                </span>
                <div class="userPanel"  v-if="subItem.userShowFlag">
                    <div class="userPanelContent">
                        <h3>请选择通知对象</h3>
                        <div class="layui-form-item" style="width:150px;height:30px;margin:5px;" >
                            <div class="layui-input-inline" >
                                <input class="checkbox"  type="checkbox" @click="allChose(subItem)"  lay-filter="allChoose" >
                                <i class="layui-icon checkboxIcon" :class="{'checkedColor':subItem.checked}">&#xe618;</i>
                                全选
                            </div>
                        </div>
                        <i class="layui-icon closeIcon" @click="userShow(subItem)">&#x1006;</i>
                        <div class="layui-form-item fl" v-for="user in subItem.dicUsersList" style="width:150px;height:30px;margin:5px;clear: none;" >
                            <div class="layui-input-inline"  @click="choseUser(user)">
                                <input class="checkbox"  type="checkbox" :checked="user.checked" >
                                <i class="layui-icon checkboxIcon" :class="{'checkedColor':user.checked}">&#xe618;</i>
                            {{user.userName}}
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label  class="layui-form-label"></label><button class="layui-btn"   @click="userShow(subItem)">确定</button>
                        </div>
                    </div>

                </div>
            </li>
        </ul>
        <div class="layui-form-mid layui-word-aux layui-input-inline">
            <span class="x-red" style="font-size: 14px;">*必填</span>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">消息类型</label>
        <div class="layui-input-inline">
            <select name="type" class="msgType" v-model="parameter.type"  lay-verify="required"  id="type" >
                <option  value="">请选择消息类型</option>
                <option v-for="typeItem in dictionariesList" :value="typeItem.code">{{typeItem.name}}</option>
            </select>
        </div>
        <div class="layui-form-mid layui-word-aux layui-input-inline">
            <span class="x-red" style="font-size: 14px;">*必填</span>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">消息排序</label>
        <div class="layui-input-inline">
            <input type="text" name="title" v-model="parameter.order" lay-verify="required" placeholder="请输入数字" autocomplete="off" class="layui-input" >
        </div>
    </div>

</form>
    <div class="layui-form-item">
        <label  class="layui-form-label"></label><button class="layui-btn" lay-submit="" lay-filter="demo2" @click="sub">提交</button>
    </div>
</div>
</div>
<script src="${rc.contextPath}/static/lib/jquery.min.js"></script>
<script src="${rc.contextPath}/static/lib/layui/layui.js" charset="utf-8"></script>
<script src="${rc.contextPath}/static/lib/vue.min.js"></script>
<script type="text/javascript">
    var myid="!${messages.id}"
    if(myid==""){
        var kid=""
    }else {
        kid="$!{messages.id}"
    }
    var VM = new Vue({
        el:"#createApp",
        created:function(){
            this.getMessagesLists();
        },
        data:{
            messagesLists:[],
            parameter:{
                id:kid,
                publish:'',
                title:'$!{messages.title}',
                content:'$!{messages.content}',
                attachMent:'$!{messages.attachMent}',
                receiveObject:'$!{messages.receiveObject}',
                status:'$!{messages.status}',
                createTime:'$!{messages.createTime}',
                updateTime:'$!{messages.updateTime}',
                createUser:'$!{messages.createUser}',
                updateUser:'$!{messages.updateUser}',
                readTime:'$!{messages.readTime}',
                type:'$!{messages.type}',
                order:'$!{messages.order}',
                imageShow:'$!{messages.imageShow}'
            },
            receiveObject1:[],
            imgSrc:"",
            dictionariesList:[]

        },
        methods: {
            getMessagesLists: function () {
                var _this = this;
                if(this.parameter.imageShow){
                    this.imgSrc = 'http://182.254.136.235.:81/uploads/'+this.parameter.imageShow;
                }else{
                    this.imgSrc = "${rc.contextPath}/static/images/timg.jpg";
                }
//                console.log(this.parameter.receiveObject);
                _this.receiveObject1 = this.parameter.receiveObject.split(",");
                $.ajax({
                    type: "post",
                    url: '${rc.contextPath}/messages/getInitInfo.do',
                    dataType: "json",
                    success: function (res) {
                        console.log(res);
                        _this.messagesLists = res.result.list;
                        _this.parameter.publish = res.result.username;
                        _this.dictionariesList = res.result.dictionariesList;
                        //选中返回的 已选人物
                        _this.messagesLists.forEach(function(item,index){
                            item.departmentList.forEach(function(subItem,index1){
                                subItem.dicUsersList.forEach(function(user,index2){
                                    _this.receiveObject1.forEach(function(myUser,myIndex){
                                        if(myUser == user.userName){
//                                            if (typeof user.checked == "undefined") {
                                                Vue.set(user, "checked", true);
//                                            }
                                        }
                                    })

                                });
                            });
                        });
                    }
                })
            },
            selectUsers: function (item) {
                if (typeof item.checked == "undefined") {
                    Vue.set(item, "checked", true);
                } else {
                    item.checked = !item.checked;
                }
                this.parameter.receiveObject = this.receiveObject1.join(",");
//                console.log(this.receiveObject1);
            },
            sub: function () {
                var _this = this;
                _this.receiveObject1 = [];//先清空数组
                if (this.parameter.title == "") {
                    layer.msg("请输入消息标题！", {icon: 1});
                    return false;
                }
                if (this.parameter.content == "") {
                    layer.msg("请输入消息内容！", {icon: 1});
                    return false;
                }
                _this.messagesLists.forEach(function(item,index0){
                    item.departmentList.forEach(function(subItem,index){
                        subItem.dicUsersList.forEach(function(user,index){
                            if(user.checked){
                                _this.receiveObject1.push(user.pkUserId);
                                _this.parameter.receiveObject = _this.receiveObject1.join(",");
                            }
                        });
                    });
                });
                if (this.parameter.receiveObject == null||this.parameter.receiveObject == '') {
                    layer.msg("请选择通知对象！", {icon: 1});
                    return false;
                }
                if ($("#type").val() == ""|| $("#type").val()==null) {
                    layer.msg("请选择消息类型！", {icon: 1});
                    return false;
                }
                //判断公告排序输入的是否是数字
                var num = this.parameter.order;
                if( isNaN( num ) ){
                    layer.msg("您输入的公告排序必须是数字！", {icon: 2});
                    return false;
                }
                console.log(_this.parameter.receiveObject);
                this.parameter.type = $("#type").val();
                //提交接口
                $.ajax({
                    type: "post",
                    url: '${rc.contextPath}/messages/saveOrUpdate.do',
                    data: _this.parameter,
                    dataType: "json",
                    success: function (data) {
                        //关闭窗口
                        layer.msg("操作成功", {icon: 0});
                        var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
                        parent.layer.close(index);
                        parent.window.location.reload();
                        window.location.href = "javascript:location.replace(location.href)";
                    }
                })
            },
            selectSelf: function (item) {
                if (typeof item.checked == "undefined") {
                    Vue.set(item, "checked", true);
                } else {
                    item.checked = !item.checked;
                }
            },
            downShow:function(item){
                if(typeof item.subItemShowFlag == "undefined") {
                    Vue.set(item, "subItemShowFlag", true);
                }else{
                    item.subItemShowFlag = !item.subItemShowFlag;
                }
            },
            userShow:function(subItem){
                var _this = this;

                if(typeof subItem.userShowFlag == "undefined") {
                    Vue.set(subItem, "userShowFlag", true);
                }else{
                    subItem.userShowFlag = !subItem.userShowFlag;
                }
            },
            choseUser:function(user){
                if(typeof user.checked == "undefined") {
                    Vue.set(user, "checked", true);
                }else{
                    user.checked = !user.checked;
                }
            },
            allChose:function (subItem) {
                if(typeof subItem.checked == "undefined"){
                    Vue.set(subItem,"checked",true);
                    subItem.dicUsersList.forEach(function(user,index){
                        if(typeof user.checked == "undefined"){
                            Vue.set(user,"checked",true);
                        }
                    });
                }else{
                    subItem.checked = !subItem.checked;
                    Vue.delete(subItem,"checked",true);
                    subItem.dicUsersList.forEach(function(user,index){
                        user.checked = !user.checked;
                        Vue.delete(user,"checked",true);
                    });
                }
            }
        }
    });//vue 实例结束


    layui.use(['layer',"form",'laydate','upload'], function(){
        var form = layui.form(),
                layer = layui.layer,
                laydate = layui.laydate;
        var pathStr = '';
        var imgStr='';
        layui.upload({
            url: '${rc.contextPath}/multipart-file/upload.do'
            ,elem: '' //指定原始元素，默认直接查找class="layui-upload-file"
            ,success: function(res){
//                var paths = res.result.path;
                var paths = res.result.url;
                console.log("paths="+res.result.url);
                pathStr += paths+",";
                console.log(res);

                var aa=res.result.url.split('.');
                if(/\.(gif|jpg|jpeg|png|bmp|tiff|GIF|JPG|JPEG|PNG|BMP|TIFF)$/.test(res.result.url)){
//                    imgStr=res.result.path;
                    imgStr=res.result.url;

                }
                VM.parameter.imageShow=imgStr;
                VM.parameter.attachMent = pathStr;
                console.log("att="+VM.parameter.attachMent);
                if(imgStr){
                    $("#LAY_demo_upload").attr('src','http://182.254.136.235.:81/uploads/'+imgStr);
                }else{
                    $("#LAY_demo_upload").attr('src',"${rc.contextPath}/static/images/timg.jpg");
                }
                layer.msg("上传成功！", {icon: 0});
            }
        });
        form.on('checkbox(allChoose)', function(data){
            var child = $(data.elem).parents('table').find('tbody input.checkbox');
            child.each(function(index, item){
                item.checked = data.elem.checked;
            });
            form.render('checkbox');
        });
    });
</script>
</body>
</html>